<template>
  <div class="chartDom" ref="chartRef"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
type EchartsOption = echarts.EChartsOption
interface Props {
  option: EchartsOption | undefined
}
const props = defineProps<Props>()
const chartRef = ref<HTMLDivElement>()
const linechart = ref<echarts.ECharts>()
onMounted(() => {
  if (chartRef.value) {
    linechart.value = echarts.init(chartRef.value)
    if (props.option) {
      linechart.value.setOption(props.option)
    }
  }
})
watch(
  () => props.option,
  (newOption) => {
    if (linechart.value && newOption && typeof newOption === 'object') {
      linechart.value.setOption(newOption)
    }
  },
  { deep: true }
)
onBeforeUnmount(() => {
  linechart.value && linechart.value.dispose()
})
</script>
<style lang="scss" scoped>
.chartDom {
  width: 100%;
  height: 100%;
}
</style>
